<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><g:layoutTitle default="VeLuvana Hard Woods"/></title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <style type="text/css">
      body {
        background-color: #AACCF2;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

      }
      #main_container {
        width:800px;
        
        margin: 0 auto;

        background-color:#FFF;
      }
      #cabezera{
        width:800px;
        height: 150px;
        position:relative;
        background-image:url(${resource(dir:"images", file: "img1.jpg") });
      }
      #titulo {
        position:absolute;
        height:30px;
        width:750px;
        text-align:right;
        top: 106px;
        color: #666;
        background-color:#FFF;
        opacity: 0.8;
        font-size: 24px;
        padding-right:20px;
      }
      table
      {
        padding:10px;
        border: 1px solid #000;
      }
      td
      {
        border: 1px solid #000;
        padding:6px;
      }
      #content
      {
       min-height:100px;
        padding:10px;
        text-align: center;
      }
      .even
      {
        background-color: rgb(218, 226, 235);
      }
      #draggable 
      { 
      width: 25px; 
      height: 5px; 
      padding: 0.5em; 
      background-color: #9A79DB;
      }
      #draggable_wrapper
      {
      float:left;
      width:200px; 
      height: 1px;
      background-color: #000000
      }
  </style>
  <script>
  var boardFoots=0;
  $(function() {
  var $drag_counter = $( "#event-drag" );
  
    $( "#draggable" ).draggable({
      drag: function() {
        actualizar( "#event-drag");
      },
    });
    $( "#draggable" ).draggable( "option", "containment", "parent" );
    
    function actualizar(event){
      boardFoots =   Math.round(($( "#draggable" ).position().left-$( "#draggable_wrapper" ).position().left)*1000/159); 
	  $( "#info" ).text(  "   "+boardFoots);
	 }
  });
  </script>
  <r:layoutResources />
  </head>
  
  <body>
    <div id="main_container">
      <div id="cabezera" >
        <div id="titulo">
          VeLuvana Hard Woods
        </div>
      </div><!--fin cabezera -->

      <div id="content" >
      
      
     <hr>
		<div id="draggable_cointainer" style="">
				<div style="float:left;padding-right: 15px;">Board Feet Number: </div>
	       <div id="draggable_wrapper">
			<div id="draggable" class="ui-widget-content"></div>
		    </div>
		    <div id="info" style="float:left"> 0</div>
		</div><!-- fin draggable container -->

		<g:layoutBody/>
		<div class="footer" role="contentinfo"></div>
		<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>
		<g:javascript library="application"/>
		<r:layoutResources />
      </div><!-- fin content -->

  </div><!-- fin main_container -->
  		<r:layoutResources />
 </body>
 </html>
